<!--
 * @authors 沙洲 chenchenyixin@qq.com http://gitee.com/shazhou
 * @date    2019-12-30 14:28:12
-->
<template>
  <div class="listInW">
    <section class="listIn">
      <img :src="items.Bimg" alt="" class="Bimg">
      <div class="content">
        <div class="item" v-for="(item,index) of items.list" :key="index">
          <img :src="item.src" alt="">
          <p class="title">{{item.title}}</p>
          <p class="price"><span class="Imoney">￥</span>{{item.price}}<span class="Ssign">起</span></p>
          <div class="progress">
            <div class="progressV">
              <div class="progressVin" :style="{width:item.rate}"></div>
            </div>
            <div class="progressRate">{{item.rate}}</div>
          </div>
          <i class="tag">精选</i>
        </div>
      </div>
    </section>
  </div>
</template>

<script>

export default {
  name: 'listIn',
  data(){
	  return{

	  }
  },
  props:{
    items:Object
  },
  components:{

  },
  created(){

  },
  mounted(){

  },
  methods:{

  }
}
</script>
<style lang="stylus" scoped>
@import '~@/assets/stylus/mixins.styl'
.listInW
  width:100%
  overflow:hidden
  .listIn
    width:100%
    overflow:hidden
    .Bimg
      width:100%
    .content
      list(flex,row)
      padding:0 10px
      justify-content:space-between
      align-items:center
      .item
        width:49%
        padding-bottom:10px
        position:relative
        img
          width:60%
          display:block
          margin:20px auto 0 auto
        .title
          ellipsis(1)
          font-size:14px
          line-height:30px
          text-align:center
        .price
          text-align:center
          font-size:20px
          color:#FF3232
          .Imoney
            font-size:12px
          .Ssign
            font-size:12px
            color:#999
            margin-left:5px
        .tag
          position:absolute
          left:0
          top:0
          z-index:2
          color:#ff0000
          font-size:12px
          padding:2px 4px
          background:linear-gradient(-35deg, #C1C1C1 0, #ACACAC 100%)
        .progress
          width:100%
          overflow:hidden
          padding:5px 15px
          box-sizing:border-box
          list(flex,row)
          justify-content:flex-start
          align-items:center
          .progressV
            width:60%
            height:8px
            background:#eaeaea
            border-radius:5px
            overflow:hidden
            .progressVin
              width:0
              height:8px
              background:linear-gradient(270deg, #F55 1%, #FF9C31 100%)
              border-radius:5px
          .progressRate
            font-size:14px
            color:#999
            margin-left:10px
            
            
          
          

</style>


